<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="headBar">
			<view class="navBack" @click="goBack()">
				<uni-icons type="left" size="20"></uni-icons>
			</view>
			<view class="titleHead">
				佣金
			</view>
		</view>


		<!-- 佣金头部信息 -->
		<view class="commissionHead">
			<view class="commissonInfo">
				<view class="balance">
					<view class="front">
						￥{{serverKickbackRemainAmount.toFixed(2)}}
					</view>
				</view>
				<view class="descText">
					佣金余额
				</view>
			</view>
			<view class="withdrawOperate" @click="toWithdraw()">
				提现
			</view>
		</view>

		<!-- 整个佣金表区域 -->
		<block v-if="serverKickbackList!=null&&serverKickbackList.length!=0">
			<!-- 标题选择 -->
			<view class="title">
				<view class="text">
					收益明细
				</view>
				<view class="text" @click="checkAllCommssion()"> 
					全部
				</view>
			</view>

			<!-- 收益明细 -->
			<view class="incomeDetail">
				<view class="incomeDetailList" v-for="(group, index) in groupedDataArray" :key="index">

					<view class="dateDeterminedCard">
						<view class="dateTitle">
							{{ group.yearMonth }}
						</view>

						<view class="detailItem" v-for="(record, index) in group.records" :key="index">
							<view class="eventInfo">
								<view class="event">
									{{getCommssionStatusText(record.serverKickbackChangeReasonStatus)}}
								</view>
								<!-- 这里需要根据状态来判断是增加还是减少 -->
								<view class="amount">

									<view
										:class="record.serverKickbackChangeReasonStatus===2 || record.serverKickbackChangeReasonStatus===3?'minus':'plus'">
										<text class="statusText"
											v-if="record.serverKickbackChangeReasonStatus===2|| record.serverKickbackChangeReasonStatus===3">
											-
										</text>
										<text class="statusText" v-else>
											+
										</text>
										￥{{record.serverKickbackChangeAmount}}
									</view>

								</view>
							</view>

							<view class="timeInfo">
								<view class="time">
									{{record.serverKickbackChangeTime}}
								</view>

								<view class="balance">
									佣金余额{{record.serverKickbackRemainAmount}}
								</view>
							</view>
						</view>


					</view>

				</view>
			</view>


		</block>

		<view class="empty" v-else>
			暂无任何收益
		</view>
		<!-- 渐变背景 -->
		<view class="background"></view>



	</view>
</template>

<script>
	import * as commssionApi from '@/api/commssion/commssion.js'
	export default {
		data() {
			return {
				//服务商剩余的佣金金额
				serverKickbackRemainAmount: 0,
				//佣金表
				serverKickbackList: [],
				groupedData: []
			};

		},
		computed: {
			groupedDataArray() {
				return Object.keys(this.groupedData).map(key => {
					return {
						yearMonth: key,
						records: this.groupedData[key]
					};
				});
			}
		},

		onLoad() {
			this.getServiceInfo();
		},
		onShow() {
			this.resetData();
			this.getServiceInfo();
		},
		methods: {
			
			goBack() {
				uni.$goBack();
			},
			// 用来重置数据
			resetData() {
				Object.assign(this.$data, this.$options.data.call(this));
			},
			checkAllCommssion(){
				uni.$toPage('/subpkg/ServiceProvider/allCommssion/allCommssion')
			},
			//对佣金按月份分组
			groupByYearMonth(data) {
				const grouped = {};
				data.forEach(record => {
					const yearMonth = record.serverKickbackChangeTime.split(' ')[0].slice(0, 7).replace('-', '年') +
						'月';
					if (!grouped[yearMonth]) {
						grouped[yearMonth] = [];
					}
					grouped[yearMonth].push(record);
				});
				return grouped;
			},

			//获取服务商佣金明细
			async getServiceInfo() {
				const res = await commssionApi.getServerKickbackByServerUserId();
				
				if (res.data.code === 200) {
					
					const serviceInfo = res.data.data;
					this.serverKickbackRemainAmount = serviceInfo.serverKickbackRemainAmount;
					this.serverKickbackList = serviceInfo.serverKickbackList ;
					this.groupedData = this.groupByYearMonth(this.serverKickbackList);

				}


			},

			//跳转提现页面
			toWithdraw() {
				
				uni.$toPage('/subpkg/ServiceProvider/withdrawPage/withdrawPage', {
					serverKickbackRemainAmount: this.serverKickbackRemainAmount
				})
			},
			getCommssionStatusText(status) {
				switch (status) {
					case 1:
						return '服务商佣金发放';
					case 2:
						return '云仓发货使用佣金抵扣运费';
					case 3:
						return '提现';
					default:
						return '未知状态';
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		align-items: center;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
		

		.headBar {
			
			display: flex;
			flex-direction: row;
			align-items: center;
			box-sizing: border-box;
			// position: absolute;
			width: 100vw;
			margin-top: 95rpx;
			

			.titleHead {
				
				width: 100%;
				height: 58rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}

			.navBack {
				
				width: 58rpx;
				height: 58rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}

		}


		// 背景区域
		.background {
			z-index: -1;
			position: absolute;
			left: -300rpx;
			top: -750rpx;
			width: 1080rpx;
			height: 1080rpx;
			opacity: 1;
			background: linear-gradient(125.77deg, rgba(212, 187, 157, 0.41) 0%, rgba(255, 255, 255, 0) 100%);
			filter: blur(200rpx);


		}

		//空背景
		.empty {
			position: absolute;
			left: 256rpx;
			bottom: 812rpx;
			font-size: 40rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 57.92rpx;
			color: rgba(116, 116, 116, 1);
		}


		// 佣金页面,佣金余额和提现操作区域
		.commissionHead {
			width: calc(100% - 120rpx);
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.commissonInfo {
				flex-wrap: nowrap;
				box-sizing: border-box;
				width: 144rpx;

				.balance {
					align-items: center;
					display: flex;

					.front {
						font-size: 48rpx;
						font-weight: 700;
						color: rgba(0, 0, 0, 1);
					}

					.suffix {
						font-weight: 700;
						color: rgba(0, 0, 0, 1);
					}
				}

				.descText {
					font-weight: 300;
					margin-top: 8rpx;
					font-size: 36rpx;
				}
			}

			.withdrawOperate {
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				width: 224rpx;
				height: 132rpx;
				opacity: 1;
				border-radius: 16rpx;
				background: rgba(223, 161, 60, 1);
				font-size: 32rpx;
				color: rgba(255, 255, 255, 1);
				font-weight: 500;
			}
		}

		//可选标题
		.title {
			box-sizing: border-box;
			width: calc(100% - 56rpx);
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 82rpx;
			margin-bottom: 16rpx;

			.text {
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: rgba(0, 0, 0, 1);
			}
		}

		// 佣金明细
		.incomeDetail {
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			width: 694rpx;
			height: 1132rpx;
			opacity: 1;
			border-radius: 30rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(243, 243, 245, 0) 100%);
			overflow: auto;
			padding-bottom: 100rpx;


			.incomeDetailList {
				padding-bottom: 50rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;



				.dateDeterminedCard {

					margin-top: 22rpx;
					width: calc(100% - 56rpx);

					display: flex;
					flex-direction: column;
					align-items: center;

					.dateTitle {

						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
					}

					.detailItem {
						border-bottom: 0.7rpx solid rgba(119, 119, 119, 1);
						width: 100%;


						.eventInfo {
							display: flex;
							justify-content: space-between;
							margin-top: 24rpx;

							.event {
								font-size: 32rpx;
								font-weight: 400;
								color: rgba(0, 0, 0, 1);
							}

							.amount {
								.plus {
									font-size: 32rpx;
									font-weight: 400;
									letter-spacing: 0rpx;
									line-height: 46.34rpx;
									color: rgba(212, 48, 48, 1);
								}

								.minus {
									ont-size: 32rpx;
									font-weight: 400;
									letter-spacing: 0rpx;
									line-height: 46.34rpx;
									color: rgba(15, 153, 70, 1);
								}
							}

						}

						.timeInfo {
							margin-top: 6rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 6px;

							.time {
								font-size: 26rpx;
								font-weight: 400;
								letter-spacing: 0rpx;
								line-height: 37.64rpx;
								color: rgba(85, 85, 87, 1);
							}

							.balance {
								font-size: 26rpx;
								font-weight: 400;
								letter-spacing: 0rpx;
								line-height: 37.64rpx;
								color: rgba(85, 85, 87, 1);
							}
						}
					}
				}
			}
		}
	}
</style>